<template>
  <div class="asetting_content cf w1 h1">
    <nav class="asetting_c-left fl">
      <Menu class="asetting-l-nav" style="width:100%;" @on-select="onChangeRoue" :open-names="openNames()" :active-name="$route.path">
        <MenuItem name="/setting/city">
        <i class="fa fa-building"></i>
        <span>城市管理</span>
        </MenuItem>
        <MenuItem name="/setting/article">
        <i class="fa fa-newspaper-o"></i>
        <span>APP文章管理</span>
        </MenuItem>
        <MenuItem name="/setting/user">
        <i class="fa fa-user"></i>
        <span>用户管理</span>
        </MenuItem>
        <MenuItem name="/setting/trade">
        <i class="fa fa-street-view"></i>
        <span>行业管理</span>
        </MenuItem>
        <MenuItem name="/setting/region">
        <i class="fa fa-university"></i>
        <span>地域管理</span>
        </MenuItem>
        <MenuItem name="/setting/type">
        <i class="fa fa-tv"></i>
        <span>设备类型</span>
        </MenuItem>
        <Submenu name="/setting/gateway">
          <template slot="title">
            <i class="fa fa-signing"></i>
            采集方式管理
          </template>
          <MenuItem name="/setting/gateway/type">采集类型</MenuItem>
          <MenuItem name="/setting/gateway/list">网关列表</MenuItem>
        </Submenu>
        <MenuItem name="/setting/build-report">
        <i class="fa fa-book"></i>
        <span>报告生成</span>
        </MenuItem>
        <MenuItem name="/setting/company-channel">
        <i class="fa fa-circle-o-notch"></i>
        <span>企业渠道</span>
        </MenuItem>
      </Menu>
    </nav>
    <div class="asetting_c-right fr">
      <transition name="fade-transverse">
        <router-view />
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onChangeRoue(path) {
      this.$router.push({ path })
    },
    openNames() {
      if (this.$route.path.startsWith('/setting/gateway')) {
        return ['/setting/gateway']
      }
      return []
    }
  }
}
</script>
